@use "@/styles/usenamespace.scss" as ns;
@use "@/styles/mixin.scss" as mixin;
@use "@/styles/function.scss" as fun;
@use "@/styles/variable.module.scss" as variable;
@use "sass:map";

@mixin fillUp() {
  border-radius: inherit;
  position: absolute;
  @include mixin.locate();
}

@mixin getColorVar($name, $type) {
  $keys: text background border shadow stroke;
  @each $baseKey in $keys {
    $key: $baseKey + Color;
    #{fun.getCssVarName($name, $key)}: #{fun.getCssVarValue($type, $key)};
  }
}

@include ns.b(button) using ($b) {
  all: initial;
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
  color: fun.getCssVarValue($b, textColor);
  border-radius: 16rpx;
  padding: 16rpx 32rpx;
  $types: ();
  @each $list in map.values($map: variable.$themes) {
    $types: map.keys(
      $map: $list
    );
  }
  @each $type in $types {
    @include ns.r($type) using ($r) {
      @include getColorVar($b, $type);
    }
  }
  #{fun.getCssVarName($b, borderWidth)}: 2rpx;

  &::before,
  &::after {
    content: none;
  }

  @include ns.e(background) using ($e) {
    @include fillUp();
    background: fun.getCssVarValue($b, backgroundColor);
  }

  @include ns.e(border) using ($e) {
    @include fillUp();
    @include mixin.gradientBorder();
    --border-color: #{fun.getCssVarValue($b, borderColor)};
    border-width: fun.getCssVarValue($b, borderWidth);
  }

  @include ns.e(shadow) using ($e) {
    @include fillUp();
    border: fun.getCssVarValue($b, borderWidth) solid transparent;
    @include mixin.boxShadow();
    --shadow-x: 0;
    --shadow-y: 6rpx;
    --shadow-color: #{fun.getCssVarValue($b, shadowColor)};
  }

  @include ns.e(loading) using ($e) {
    margin-right: 16rpx;
    position: relative;
  }

  @include ns.e(content) using ($e) {
    position: relative;
  }

  @include ns.s(link) using ($s) {
    padding: 0;

    @include ns.b($b) using ($b) {
      @include ns.e(background) using ($e) {
        display: none;
      }
      @include ns.e(border) using ($e) {
        display: none;
      }
      @include ns.e(shadow) using ($e) {
        display: none;
      }
    }

    @include ns.b(font) using ($fb) {
      #{fun.getCssVarName($fb, color)}: #{fun.getCssVarValue($b, backgroundColor)};

      @include ns.e(font) using ($fe) {
        @include mixin.gradientFont();
        --color: #{fun.getCssVarValue($fb, color)};
      }
    }
  }

  @include ns.s(icon) using ($s) {
    width: fit-content;
    padding: 32rpx;
    border-radius: 50%;

    @include ns.s(loading) using ($s) {
      @include ns.b($b) using ($b) {
        @include ns.e(loading) using ($e) {
          margin-right: 0;
        }
        @include ns.e(content) using ($e) {
          display: none;
        }
      }
    }
  }

  @include ns.s(loading) using ($s) {
    &::before {
      content: none;
    }
  }
}

button[disabled] {
  @include ns.s(disabled) using ($s) {
    @include getColorVar(button, $s);
    pointer-events: none;
    background: transparent;
    color: fun.getCssVarValue(button, textColor);
  }
}